<template>
    <el-form ref="form" :model="form" label-width="6em" :rules="rules">
      <h2>添加新书</h2>

      <el-form-item label="ISBN" prop="isbn" required>
        <el-input v-model="form.isbn"></el-input>
      </el-form-item>

      <el-form-item label="书名" prop="name" required>
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="作者" prop="author" required>
        <el-input v-model="form.author"></el-input>
      </el-form-item>

      <el-form-item label="出版社" prop="house" required>
        <el-input v-model="form.house"></el-input>
      </el-form-item>

      <el-form-item label="出版时间" prop="pubdate" required>
        <el-date-picker
          v-model="form.pubdate"
          type="month"
          placeholder="选择月"
          :picker-options="{disabledDate: disabledDate}"
          value-format="yyyy-MM">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="原价" prop="price" required>
        <el-input v-model="form.price" @change="priceIt('price')">
          <span slot="prefix">￥</span>
        </el-input>
      </el-form-item>

      <el-form-item label="售价" prop="sellPrice">
        <el-input v-model="form.sellPrice" @change="priceIt('sellPrice')">
          <span slot="prefix">￥</span>
        </el-input>
      </el-form-item>

      <el-form-item label="库存" prop="stock">
        <el-input v-model.number="form.stock" @change="intIt('stock')"></el-input>
      </el-form-item>

      <el-form-item label="封面">
        <el-col :span="12">
          <el-upload
            :auto-upload="false"
            accept="image/*"
            ref="imgUpload"
            drag
            :action="imgUploadUrl"
            :multiple="false"
            :show-file-list="false"
            :on-change="imgChange"
            :on-success="handleSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-col>
        <el-col :span="12">
          <img :src="imgURL" width="300px">
        </el-col>
      </el-form-item>

      <el-form-item label="描述" prop="desp">
        <el-input type="textarea" v-model="form.desp"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>

    </el-form>
</template>

<script>

import { price } from '@/utils/format'
import { AdminPutNewBook } from '@/utils/request'

export default {
  name: 'cl-book-form',
  data () {
    return {
      imgURL: '',
      form: {
        'isbn': '',
        'name': '',
        'author': '',
        'house': '',
        'price': '',
        'sellPrice': '',
        'stock': 0,
        'pubdate': '',
        'desp': ''
      },
      rules: {
        'isbn': [
          { required: true, message: '请输入ISBN', trigger: 'blur' }
        ],
        'name': [
          { required: true, message: '请输入书名', trigger: 'blur' }
        ],
        'author': [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        'house': [
          { required: true, message: '请输入出版社', trigger: 'blur' }
        ],
        'price': [
          { required: true, message: '请输入原价', trigger: 'blur' }
        ],
        'pubdate': [
          { required: true, message: '请输入选择出版时间', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    imgUploadUrl () {
      return '/api/admin/book/surface/' + this.form.isbn
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { form } = this
          if (!form.sellPrice) {
            form.sellPrice = form.price
          }
          console.log(form)
          AdminPutNewBook(form).then(rsp => {
            const { success } = rsp.data
            if (success) {
              this.$refs.imgUpload.submit()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    priceIt (attr) {
      this.form[attr] = price(this.form[attr])
    },
    intIt (attr) {
      let i = Number.parseInt(this.form[attr])
      this.form[attr] = isNaN(i) ? 0 : i
    },
    disabledDate (dt) {
      let now = new Date()
      return dt.getTime() > now.getTime()
    },
    imgChange (file, fileList) {
      while (fileList.length > 1) {
        fileList.shift()
      }
      console.log(fileList)

      this.imgURL = URL.createObjectURL(file.raw)
    },
    handleSuccess (rsp, file, fileList) {
      window.location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
